<template>
  <div>
    <el-card shadow="never">
      <div slot="header" class="clearfix">
        <el-tabs v-model="activeName" @tab-click="handleClick"> <!-- 标签选项卡 -->
          <el-tab-pane label="最新主题" name="latest"> <!-- 选项页 -->
            <article v-for="(item, index) in articleList" :key="index" class="media"> <!--HTML5的一个新标签 语义化了一个div 可以理解为一个div-->
            <!-- media bulma中的媒体组件 分为左右两部分 -->
              <div class="media-left">
                <figure class="image is-48x48">
                  <img :src="`${item.avatar}`" style="border-radius: 5px;">
                </figure>
              </div>
              <div class="media-content">
                <div class="">
                  <p class="ellipsis is-ellipsis-1">
                    <el-tooltip class="item" effect="dark" :content="item.title" placement="top">
                      <router-link :to="{name:'post-detail',params:{id:item.id}}">
                        <span class="is-size-6">{{ item.title }}</span> <!-- 文章标题 -->
                      </router-link>
                    </el-tooltip>
                  </p>

                  <p class="ellipsis is-ellipsis-3"> <!-- 文章内容 -->
                    {{ item.content }}
                  </p>

                </div>
                <!-- level bulma中的ui level中的div可以在一行上显示 -->
                <nav class="level has-text-grey is-mobile  is-size-7 mt-2">
                  <div class="level-left">
                    <div class="level-left">
                      <router-link class="level-item" :to="{ path: `/member/${item.username}/home` }">
                        {{ item.alias }} <!-- 文章作者 -->
                      </router-link>

                      <span class="mr-1">
                        发布于:{{ dayjs(item.createTime).format("YYYY/MM/DD") }} <!-- 将返回的时间格式化 -->
                      </span>

                      <!-- 帖子标签 -->
                      <span
                        v-for="(tag, index) in item.tags"
                        :key="index"
                        class="tag is-hidden-mobile is-success is-light mr-1"
                      >
                        <router-link :to="{ name: 'tag', params: { name: tag.name } }">
                          {{ "#" + tag.name }}
                        </router-link>
                      </span>

                      <span class="is-hidden-mobile">浏览:{{ item.view }}</span>
                    </div>
                  </div>
                </nav>
              </div>
              <div class="media-right" />
            </article>
          </el-tab-pane>
          <el-tab-pane label="热门主题" name="hot">
            <article v-for="(item, index) in articleList" :key="index" class="media">
              <div class="media-left">
                <figure class="image is-48x48">
                  <img :src="`${item.avatar}`" style="border-radius: 5px;">
                </figure>
              </div>
              <div class="media-content">
                <div class="">
                  <p class="ellipsis is-ellipsis-1">
                    <el-tooltip class="item" effect="dark" :content="item.title" placement="top">
                      <router-link :to="{name:'post-detail',params:{id:item.id}}">
                        <span class="is-size-6">{{ item.title }}</span>
                      </router-link>
                    </el-tooltip>
                  </p>

                  <p class="ellipsis is-ellipsis-3">
                    {{ item.content }}
                  </p>

                </div>
                <nav class="level has-text-grey is-mobile  is-size-7 mt-2">
                  <div class="level-left">
                    <div class="level-left">
                      <router-link class="level-item" :to="{ path: `/member/${item.username}/home` }">
                        {{ item.alias }}
                      </router-link>

                      <span class="mr-1">
                        发布于:{{ dayjs(item.createTime).format("YYYY/MM/DD") }}
                      </span>

                      <span
                        v-for="(tag, index) in item.tags"
                        :key="index"
                        class="tag is-hidden-mobile is-success is-light mr-1"
                      >
                        <router-link :to="{ name: 'tag', params: { name: tag.name } }">
                          {{ "#" + tag.name }}
                        </router-link>
                      </span>

                      <span class="is-hidden-mobile">浏览:{{ item.view }}</span>
                    </div>
                  </div>
                </nav>
              </div>
              <div class="media-right" />
            </article>
          </el-tab-pane>
        </el-tabs>
      </div>

      <!--分页-->
      <!--当前总页大于0 则显示组件-->
      <pagination
        v-show="page.total > 0"
        :total="page.total"
        :page.sync="page.current"
        :limit.sync="page.size"
        @pagination="init"
      />
    </el-card>
  </div>
</template>

<script>
import { getList } from '@/api/post'
import Pagination from '@/components/Pagination'

export default {
  name: "TopicList",
  components: { Pagination },

  data() {
    return {
      activeName: 'latest', // 用来切换tab项 是要最新的帖子还是最热的帖子 默认是最新的
      articleList: [], // 定义一个空的文章列表 向服务器发送请求 请求回来的数据赋值给列表
      page: {
        current: 1, // 当前是第几页
        size: 10, // 每页多少条
        total: 0, // 总共多少条
        tab: 'latest'
      }
    }
  },
  created() {
    this.init(this.tab)
  },
  methods: {
    // 调用getList接口
    init(tab) {
      // 取page中的当前页和每页多少条发送给服务器
      getList(this.page.current, this.page.size, tab).then((response) => {
        const { data } = response
        this.page.current = data.current // 服务器回应会来的当前页
        this.page.total = data.total // 服务器回应会来的总共多少条
        this.page.size = data.size // 服务器回应会来的每页多少条
        this.articleList = data.records // 回应会来的数据赋值给列表
      })
    },
    // 向服务器请求相应的帖子列表
    handleClick(tab) {
      this.page.current = 1
      this.init(tab.name)
    }
  },
};
</script>

<style scoped>
</style>